 body,
 html {
     width: 100%;
 }
 /* 头部区域 */

 header {
     width: 100%;
     height: 69.3px;
     position: relative;
     background: #FFFFFF;
     border: 1px solid #EBEEF5;
     box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.02);
 }

 .logo {
     position: absolute;
     left: 130px;
     top: 11px;
 }

 .logo img {
     width: 159px;
     height: 46px;
 }

 .iconmenu {
     position: absolute;
     left: 62.3%;
     top: 16.8px;
 }

 .iconmenu input {
     width: 231px;
     height: 39.6px;
     line-height: 39.6px;
     padding-left: 8px;
     background: #F7F8FA;
     border: 1px solid #EBEEF5;
     border-radius: 51px;
 }

 .iconmenu i {
     position: absolute;
     font-size: 23px;
     top: 10px;
     right: 15px;
     color: #ccc;
 }

 .login {
     position: absolute;
     left: 81.1%;
     top: 16.8px;
     width: 140px;
     height: 39.6px;
     text-align: center;
     color: #4DA1FF;
     background-color: #fff;
     border: 1px solid #4DA1FF;
     border-radius: 51px;
 }

 .login a {
     color: #4DA1FF;
     line-height: 39.6px;
 }
 /* 轮播图样式 */

 .swiper-container .swiper-wrapper .swiper-slide img {
     width: 100%;
     height: 297px;
 }

 .swiper-container .swiper-pagination-bullet {
     background: #fff;
     opacity: 1;
 }

 .swiper-container .swiper-pagination-bullet-active {
     width: 40px;
     height: 8px;
     background: #FFFFFF;
     border-radius: 11px;
 }
 /* 商品部分 */

 .menu {
     width: 1140px;
     height: 108.5px;
     background: #FFFFFF;
     box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.02);
     border-radius: 4px;
     margin: 0 auto;
     margin-top: 19.8px;
     margin-bottom: 40px;
     padding: 39.5px 0px 40px 40px;
 }

 .menu ul {
     width: 1118px;
     height: 30px;
 }

 .menu ul li {
     line-height: 30px;
     text-align: center;
     float: left;
     margin-left: 32px;
     opacity: 0.8;
     font-size: 16px;
     color: #444C63;
     cursor: pointer;
 }

 .menu div span {
     float: left;
     margin-left: 0;
     font-family: PingFangSC-Medium;
     font-weight: 700;
     color: #323C47;
 }

 .menu ul li:nth-of-type(1) {
     margin-left: 50px;
     color: #323C47;
 }
 /* 样式 */

 .menu .totalType .total {
     width: 65px;
     height: 30px;
     text-align: center;
     line-height: 30px;
     color: #4DA1FF;
     border: 1px solid #4DA1FF;
     border-radius: 4px;
 }

 .menu .totalCard .staff {
     width: 59px;
     height: 28.7px;
     text-align: center;
     line-height: 28.7px;
     color: #4DA1FF;
     border: 1px solid #4DA1FF;
     border-radius: 4px;
 }

 .menu .paixu .update {
     opacity: 0.8;
     font-size: 16px;
     color: #4DA1FF;
 }

 .menu .totalCard {
     margin-top: 18.5px;
 }

 .menu .paixu {
     margin-top: 23.5px;
 }
 /* 内容区域 */

 .content {
     width: 1180px;
     margin: 20px auto;
 }

 .content .content-moudle .first-ul li {
     margin-top: 0;
 }

 .content .content-moudle ul li {
     float: left;
     width: 276px;
     height: 297px;
     margin-left: 22px;
     margin-top: 25.8px;
     background-color: #FFFFFF;
     box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.02);
     border-radius: 4px;
 }

 .content .content-moudle ul li:first-of-type {
     margin-left: 0;
 }

 .content .content-moudle .blank-moudle {
     position: relative;
     text-align: center;
 }

 .content .content-moudle .blank-moudle div {
     width: 256px;
     height: 275.2px;
     border: 1px dotted #D8D8D8;
     border-radius: 4px;
     margin: 10px;
 }

 .content .content-moudle .blank-moudle i {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -20px;
     margin-top: -23px;
     font-size: 40px;
     color: #4DA1FF;
 }

 .content .content-moudle .blank-moudle .text-moudle {
     width: 135px;
     height: 21px;
     opacity: 0.8;
     position: absolute;
     left: 71px;
     bottom: 48.5px;
 }

 .content .content-moudle .content-photos {
     position: relative;
 }

 .content .content-moudle .content-photos a img {
     width: 281px;
     height: 198px;
 }
 /* 选择使用遮罩层 */

 .content .content-moudle .content-photos .tpl-mask {
     position: absolute;
     left: 0;
     top: 0;
     display: none;
     width: 281px;
     height: 198px;
     opacity: 0.5;
     background: #17214D;
 }

 .content .content-moudle .content-photos:hover>.tpl-mask {
     display: block;
 }

 .content .content-moudle .content-photos:hover>.like {
     display: block;
 }

 .content .content-moudle .content-photos:hover>.use {
     display: block;
 }

 .content .content-moudle .content-photos:hover p:nth-of-type(1) {
     display: block;
     z-index: 8;
 }

 .content .content-moudle .content-photos:hover p:nth-of-type(2) {
     display: block;
     z-index: 8;
 }

 .content .content-moudle .content-photos .like {
     position: absolute;
     display: none;
     left: 53px;
     top: 59px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #fff;
     text-align: center;
     line-height: 60px;
     z-index: 8;
     cursor: pointer;
 }

 .content .content-moudle .content-photos .like i {
     font-size: 26px;
     color: #BEC3D5;
 }

 .content .content-moudle .content-photos .use {
     position: absolute;
     display: none;
     right: 60px;
     top: 59px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #fff;
     text-align: center;
     line-height: 60px;
     z-index: 8;
     cursor: pointer;
 }

 .content .content-moudle .content-photos .use i {
     font-size: 26px;
     color: #BEC3D5;
 }

 /* .content .content-moudle .content-photos .like:hover>i {
     color: #FC577A;
 } */

 .content .content-moudle .content-photos .use:hover>i {
     color: #FC577A;
 }

 .content .content-moudle .content-photos p:nth-of-type(1) {
     position: absolute;
     display: none;
     left: 60px;
     bottom: 43px;
     color: #FFFFFF;
     letter-spacing: 2.67px;
 }

 .content .content-moudle .content-photos p:nth-of-type(2) {
     position: absolute;
     display: none;
     right: 71px;
     bottom: 43px;
     color: #FFFFFF;
     letter-spacing: 2.67px;
 }

 .content .content-moudle .content-text p:first-child {
     opacity: 1;
     line-height: 21px;
     color: #323C47;
     letter-spacing: 0.8px;
     margin: 19.6px 55px 17.8px 20px;
 }

 .content .content-moudle .content-text .free {
     display: inline-block;
     color: #FF4141;
     line-height: 21px;
     margin-left: 20px;
     margin-bottom: 28px;
 }

 .content .content-moudle .content-text p span {
     margin-right: 8px;
     color: #BEC3D5;
 }
 /* 分页区域 */

 .sorter {
     width: 1180px;
     height: 40px;
     margin: 30px 130px 89px 130px;
     position: relative;
 }

 .sorter ul {
     width: 592px;
     height: 40px;
     margin-left: 350px;
     line-height: 40px;
 }

 .sorter ul li a {
     width: 40px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     color: #989898;
     border: 1px solid #EBEEF5;
     border-radius: 2px;
     background-color: #fff;
     float: left;
     margin-left: 6px;
 }

 .sorter ul li:first-child {
     margin-left: 0;
 }

 .sorter .triangle-left {
     width: 40px;
     height: 40px;
     position: absolute;
     left: 300px;
     top: -2px;
 }

 .sorter .triangle-left .left {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
     border-right: 10px solid #ccc;
     border-bottom: 5px solid transparent;
 }
 /* 分页鼠标悬停 */

 .sorter .paging li a:hover {
     background: #4DA1FF;
     border-radius: 2px;
     color: #fff;
 }

 .sorter .triangle-right {
     width: 40px;
     height: 40px;
     position: absolute;
     left: 715px;
     top: -3px;
 }

 .sorter .triangle-right .right {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
     border-left: 10px solid #ccc;
     border-bottom: 5px solid transparent;
 }

 .sorter .sureBtn {
     position: absolute;
     left: 750px;
     top: 0px;
 }

 .sorter .sureBtn .square {
     width: 40px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     background: #FFFFFF;
     border: 1px solid #EBEEF5;
     border-radius: 2px;
 }

 .sorter .sureBtn button {
     width: 40px;
     height: 40px;
     background: #FFFFFF;
     border: 1px solid #4DA1FF;
     border-radius: 2px;
     font-size: 12px;
     color: #4DA1FF;
     text-align: center;
     line-height: 40px;
 }
 /* 遮罩层 */

 .hide-container {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     display: none;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 3;
 }
 /* 隐藏内容 */

 .hide-content {
     display: none;
     position: absolute;
     width: 640px;
     height: 580px;
     padding: 30px 30px 0 30px;
     background-color: #fff;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     z-index: 9;
 }

 .hide-content img {
     width: 640px;
     height: 400px;
 }

 .hide-content .hide-text {
     width: 640px;
     height: 56px;
     margin-bottom: 10px;
     font-size: 16px;
     color: #323C47;
     letter-spacing: 0;
     line-height: 28px;
     white-space: normal;
     word-break: break-all;
     word-wrap: break-word;
 }

 .hide-content .price .money {
     opacity: 0.8;
     line-height: 31px;
     font-size: 24px;
     color: #FF4141;
 }

 .hide-content .price span i {
     font-size: 12px;
     color: #8891AC;
     margin-left: 20px;
 }

 .hide-content .price .num i {
     margin-left: 11px;
 }

 .hide-content .btn {
     float: right;
 }

 .hide-content .btn button {
     width: 100px;
     height: 40px;
     font-size: 14px;
     background-color: #fff;
     border: 1px solid #4DA1FF;
     color: #4DA1FF;
     border-radius: 55px;
     cursor: pointer;
 }

 .hide-content .btn button:hover {
     background-color: #4DA1FF;
     color: #fff;
 }